<template>
  <div id="revisepassword">
    <Sidebar></Sidebar>
    <div style="height: 900px; width: 1500px; margin-left: 10%; margin-top: 5%">
      <el-container style="height: 100vh; border: 1px">
        <el-aside width="300px">
          <PerSidebar></PerSidebar>
        </el-aside>
        <el-main>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="width: 400px; margin-left: 25%; margin-top: 100px"
            label-position="top"
          >
            <el-form-item
              label="请输入旧密码"
              prop="oldpass"
              style="font-weight: bolder"
            >
              <el-input v-model="ruleForm.oldpass"></el-input>
            </el-form-item>
            <el-form-item
              label="请输入新密码"
              prop="pass"
              style="font-weight: bolder"
            >
              <el-input v-model="ruleForm.pass"></el-input>
            </el-form-item>
            <el-form-item
              label="再次输入密码"
              prop="checkpass"
              style="font-weight: bolder"
            >
              <el-input v-model="ruleForm.checkpass"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >修改</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 退出登录 -->
          <div>
            <el-button
              type="text"
              style="
                color: black;
                font-size: x-large;
                float: right;
                margin-top: 150px;
              "
              @click="Loginout"
            >退出登录</el-button>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
    <script>
import axios from "axios";
import Sidebar from "@/components/SeekerSidebar.vue";
import PerSidebar from "@/components/PersonSidebar.vue";
import { EventBus } from '@/util/event-bus.js';
export default {
  components: {
    Sidebar,
    PerSidebar,
  },
  data() {
    //新密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6 || value.length > 10) {
        callback(new Error("密码长度必须在6到10个字符之间"));
      } else {
        if (this.ruleForm.checkpassword !== "") {
          this.$refs.ruleForm.validateField("checkpass");
        }
        callback();
      }
    };
    //再次输入新密码
    var validateCheckPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateOldPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        oldpass: "",
        pass: "",
        checkpass: "",
      },
      SeekerUserData: JSON.parse(sessionStorage.getItem("SeekerUser")),
      //规则
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkpass: [{ validator: validateCheckPass, trigger: "blur" }],
        oldpass: [{ validator: validateOldPass, trigger: "blur" }],
      },
    };
  },
  methods: {
    closeWebSocket() {
      EventBus.$emit('close-websocket-seeker');
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.SeekerUserData.spassword !== this.ruleForm.oldpass) {
            alert("旧密码输入错误");
            return false;
          }
          let data = new FormData();
          data.append("susername", this.SeekerUserData.susername);
          data.append("newPassword", this.ruleForm.pass);
          axios
            .post("http://localhost:8080/hqdx/seeker/revisePassword", data)
            .then((response) => {
              //更新会话信息的密码
              sessionStorage.setItem(
                "SeekerUser",
                JSON.stringify(response.data.data.items)
              );
              this.SeekerUserData = JSON.parse(
                sessionStorage.getItem("SeekerUser")
              );
              alert("修改密码成功");
              //重置
              this.resetForm("ruleForm");
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    Loginout() {
      this.closeWebSocket();
      let data = new FormData();
      data.append("susername", this.SeekerUserData.susername);
      axios
        .post("http://localhost:8080/hqdx/seeker/loginout", data)
        .then((response) => {})
        .catch((error) => {
          console.log(error);
        });
      this.$router.push("/login");
      sessionStorage.setItem("LoginSeekerState", JSON.stringify(false)); //退出登录，状态记录
    },
  },
};
</script>
    <style scoped>
#revisepassword {
  background: linear-gradient(to right, #ffffff, #e0f7fa);
}
.el-aside {
  background-color: white;
  text-align: center;
}

.el-main {
  background: linear-gradient(to right, #ffffff, #e0f7fa);
  color: #333;
  text-align: center;
}
</style>